<template>
  <div class="container">
    <!-- 添加目录弹出框 -->
    <el-dialog title="修改目录" :visible.sync="addDialogVisible" width="800px">
      <div>
        <span>文章标题：</span>
        <el-input size="medium" class="amend-width" v-model="addData.title" placeholder="请输入内容"></el-input>
      </div>
      <div class="div-quill">
        <span>文章内容：</span>
        <quill-editor v-model="addData.articleBody" class="quill-editor-size" :options="editorOption" />
      </div>
      <div style="margin-top: 20px">
        <span>视频地址：</span>
        <el-input size="medium" class="amend-width" v-model="addData.videoURL" autocomplete="off" placeholder="请输入内容"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addListData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加目录弹出框 -->
    <!-- end -->
  </div>
</template>

<script>
import { add } from '@/api/hmmm/articles'

// 导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      addDialogVisible: false, // 添加对话框
      addData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      editorOption: {
        // 占位配置
        modules: {
          // 配置工具栏
          toolbar: [ // quillEditor的配置项，用来自定义工具栏
            ['bold', 'italic'],
            ['underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      }
    }
  },
  methods: {
    // 添加提交
    async addListData() {
      try {
        await add({
          title: this.addData.title,
          articleBody: this.addData.articleBody,
          videoURL: this.addData.videoURL
        })
        // 清空表单数据
        this.addData.title = ''
        this.addData.articleBody = ''
        this.addData.videoURL = ''

        this.$emit('addGetArticles')
        this.addDialogVisible = false // 关闭对话框
        this.$message.success('添加成功')
      } catch (error) {
        this.$message.error('错了哦')
      }
    },
    onClickLeft() { // 父组件触发事件传递
      this.addDialogVisible = true
    }
  }
}
</script>

<style scoped lang='less'>
.quill-editor-size {
  float: right;
  width: 680px;
}
.div-quill {
  overflow: hidden;
}
.amend-width {
  width: 680px;
  margin: 0 0 20px 10px;
}
</style>
